<template>
	<view class="industry">
		<view class="content">
			
			<view class="title">所在行业</view>
			<view class="md4Text mgrey info">请选择行业，最多3个</view>
			<!-- 选择条件 -->
			<view class="selection">
				<view class="selectItem" >
					<view class="content">
						<view class="name smTitle">互联网/it/电子/通信</view>

						<view class="next"><image src="../../../static/imgs/down.png" mode=""></image></view>
					</view>
				</view>

				<view class="selectItem" >
					<view class="content">
						<view class="name smTitle">互联网/it/电子/通信</view>

						<view class="next"><image src="../../../static/imgs/down.png" mode=""></image></view>
					</view>
				</view>

				<view class="selectItem">
					<view class="content">
						<view class="name smTitle">互联网/it/电子/通信</view>

						<view class="next"><image src="../../../static/imgs/down.png" mode=""></image></view>
					</view>

					<view class="tags">
						<view class="tag" v-for="(tag,tagIndex) in tags" :class="{tagActive:tag.id==tagIndex}" :key="tagIndex" @click="chooseIt(tag,tagIndex)">{{ tag.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 继续添加求职期望 -->

		

		
	</view>
</template>

<script>

export default {
	data() {
		return {
			currentPage: 1,
			state: '离职-随时到岗',
			city: '合肥市',
			industry: '8-9k,行业不限',
			isChange: false,
			tags:[
				{name:'电子商务',id:0},
				{name:'游戏',id:0},
				{name:'媒体',id:0},
				{name:'广告营销',id:0},
				
			]
		};
	},
	components: {
		
	},

	methods: {
		getState(data) {
			console.log('state', data);
			this.state = data.state;
			this.isChange = false;
		},
		showStateList() {
			this.isChange = true;
		},
		goMyCity() {
			uni.navigateTo({
				url: '/pages/views/home/myCity'
			});
		},
		chooseIt(tag,tagIndex){
			tag.id = tagIndex;
		}
	},

	onLoad: function(option) {
		console.log('option', option.city);
		this.city = option.city;
	}
};
</script>

<style scoped lang="less">
.industry {
	width: 100%;
	background: #ffffff;
	.content {
		width: 100%;
		padding: 0 52upx;
		position: relative;
		.pageNum {
			position: absolute;
			right: 70upx;
			top: 0;
			text {
				color: #3465b1;
			}
		}

		.title {
			font-size: 40upx;
			margin: 80upx 0 25upx 20upx;
			font-weight: bold;
			letter-spacing: 5upx;
		}
		.info {
			margin-left: 20upx;
		}

		.selection {
			margin-top: 40upx;
			.selectItem {
				width: 100%;

				padding-bottom: 25upx;
				padding-top: 50upx;
				border-bottom: 2upx solid #e5e5e5;
                .tags{
						display: flex;
						margin-top: 42upx;
						padding-left: 52upx;
					.tag{
						height: 44upx;
						line-height: 44upx;
						background: #F5F5F5;
						padding: 0 15upx;
						opacity: 1;
						margin-right: 15upx;
						border-radius: 4px;
					}
					
					.tagActive{
						
                       background: rgba(52, 101, 177, 0.2);
						color:#3465B1 ;
					}
				}
				.content {
					width: 100%;
					align-items: center;
					justify-content: space-between;
					display: flex;

					.next {
						image {
						vertical-align: middle;
							margin-left: 10upx;
						width: 48upx;
						height: 48upx;
						}

			}


}}}}

	
}
</style>
